<template>
  <div id="productdetail">
    <div class="productimg">
      <img :src="productinfo.img" alt="">
    </div>
    <div class="productview">
      <p class="pvtitle">
        {{productinfo.title}}
      </p>
      <div class="pvtags">
        <div class="pvprice"><span>{{productinfo.price}}</span>积分</div>
        <div v-if="productinfo.ptype !== 1" class="pvright">快递：{{productinfo.iottype}}</div>
      </div>
      <div class="pvtags">
        <div class="pvnumber"><em>数量：</em><span class="prleft" @click="lessStock()">-</span><input name="pvinputnums" type="number" :value="checknum" @input="changeNum($event)"><span class="prright" @click="addStock()">+</span></div>
      </div>
    </div>
    <!-- <cell class="weightsel" title="选择尺码" :value="chooseweight" v-if="productinfo.ptype !== 1" @click.native="showweight = true" is-link></cell> -->
    <div class="productdesc" v-html="productinfo.content"></div>
    <!-- <div class="weightlist" v-show="showweight">
      <div class="listposs">
        <icon class="closeweight" @click.native="showweight = false" type="cancel"></icon>
        <p>尺码</p>
        <span v-for="item in weightlist" :class="item === chooseweight ? 'active' : ''" @click.stop="chooseweight = item">{{item}}</span>
      </div>
    </div> -->
    <div class="buycarbar">
      <div class="addcar" v-if="productinfo.ptype !== 1" @click="addBuyCar()">加入收藏夹</div>
      <div class="buynow" @click="toBuy()">立即兑换</div>
    </div>
    <toast v-model="showtoast">添加成功</toast>
    <div transfer-dom>
      <alert v-model="showalert">
        {{showalerttext}}
      </alert>
    </div>
    <confirm v-model="showconfirm"
      :content="confirmtxt"
      :close-on-confirm="false"
      @on-cancel="cancelConfirm"
      @on-confirm="okConfirm">
    </confirm>
  </div>
</template>

<script>
  import { Cell, Alert, Toast, Icon, TransferDom, Confirm } from 'vux'
  export default{
    name: 'productdetail',
    components: {
      Cell,
      Alert,
      Toast,
      TransferDom,
      Icon,
      Confirm
    },
    data () {
      return {
        showalert: false,
        showalerttext: '',
        showtoast: false,
        checknum: 1,
        productinfo: {},
        weightlist: [],
        chooseweight: '',
        showconfirm: false,
        confirmtxt: ''
      }
    },
    created () {
      const pid = this.$route.query.id
      this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoDetail/' + this.getCookie('appid'), {
        openId: this.getCookie('openid'),
        id: pid
      })
      .then((response) => {
        this.productinfo = response.data.data
        // this.weightlist = this.productinfo.weight.split(',')
        window.zhuge.track('查看商品详情', {
          '事件名称': '会员中心-积分商城-搜索-点击',
          '商品名称': response.data.data.title,
          'OpenID': this.getCookie('openid'),
          '点击时间': (new Date().toLocaleString())
        })
      })
    },
    methods: {
      addBuyCar: function () {
        let addarr = [
          {
            'id': this.$route.query.id,
            'num': this.checknum
          }
        ]
        let isin = false
        let oldbuycarstr = JSON.parse(this.getCookie('buycarlist'))
        oldbuycarstr = oldbuycarstr === null ? [] : oldbuycarstr
        oldbuycarstr.forEach((item) => {
          if (parseInt(item[0].id) === parseInt(this.$route.query.id)) {
            isin = true
            item[0].num += this.checknum
          }
        })
        if (!isin) {
          oldbuycarstr.push(addarr)
          this.setCookie('buycarlist', JSON.stringify(oldbuycarstr))
        } else {
          this.setCookie('buycarlist', JSON.stringify(oldbuycarstr))
        }
        this.showtoast = true
      },
      toBuy: function () {
        window.zhuge.track('Click', {
          '事件名称': '会员中心-积分商城-商品兑换-点击',
          '商品名称': this.productinfo.title,
          'OpenID': this.getCookie('openid'),
          '点击时间': (new Date().toLocaleString())
        })
        if (this.productinfo.ptype === 1) {
          this.confirmtxt = '本次兑换将消耗' + this.checknum * this.productinfo.price + '积分，兑换成功后可至兑换记录页面查看，确认兑换吗？'
          this.showconfirm = true
        } else {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-积分商城-商品详情-兑换-点击',
            '商品名称': this.productinfo.title,
            '商品金额': this.productinfo.price * this.checknum,
            'OpenID': this.getCookie('openid'),
            '点击时间': (new Date().toLocaleString())
          }, () => {
            this.routeto('orderinner', {id: this.productinfo.id, num: this.checknum})
          })
        }
      },
      addStock: function () {
        this.checknum ++
      },
      lessStock: function () {
        this.checknum > 1 ? this.checknum -- : this.checknum
      },
      changeNum: function (e) {
        this.checknum = Math.abs(Math.round(e.target.value))
      },
      cancelConfirm: function () {
        this.showconfirm = false
      },
      okConfirm: function () {
        this.showconfirm = false
        let sdata = [{
          'id': this.productinfo.id,
          'num': this.checknum,
          'weight': ''
        }]
        this.$axios.post(this.apidomain + '/api/integralMall/saveConfirmOrder/' + this.getCookie('appid'), {
          data: sdata,
          openId: this.getCookie('openid'),
          name: '',
          phone: '',
          address: '',
          province: '',
          city: '',
          district: ''
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.showtoast = true
            window.zhuge.track('Click', {
              '事件名称': '会员中心-积分商城-商品详情-提交订单-点击',
              '商品名称': this.productinfo.title,
              '商品金额': this.productinfo.price,
              'OpenID': this.getCookie('openid'),
              '点击时间': (new Date().toLocaleString())
            }, () => {
              setTimeout(() => { this.routeto('orderdetail', {id: response.data.data.id}) }, 200)
            })
          } else {
            this.showalerttext = response.data.errorMsg || '兑换失败'
            this.showalert = true
          }
        })
      }
    }
  }
</script>
<style lang="less">
@import '../assets/less/product/productdetail.less';
</style>
